<template>
    <el-card>
        <el-row justify="space-between">
            <el-col :span="1.5">
                <div style="font-size: 18px; line-height: 30px;">
                    <strong>供应商产品质量排行</strong>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div style="display: flex; align-items: center;">
                    <span>所属公司信息：</span>
                    <el-select placeholder="请选择所属公司信息" style="width: 170px;">
                        <el-option label="item.label" value="item.value" />
                    </el-select>
                </div>
            </el-col>
        </el-row>
        <el-table class="mt20" :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="供应商" align="center" />
            <el-table-column prop="name" label="采购产品总数" align="center" />
            <el-table-column prop="address" label="预计总合格率" align="center" />
        </el-table>
        <div class="mt20" style="display: flex; justify-content: flex-end;">
            <el-pagination layout="prev, pager, next" :total="50" />
        </div>
    </el-card>
</template>
<script setup lang="ts">
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189',
    },
]

// const props = defineProps({

// })

</script>
<style lang="scss" scoped></style>